/* eslint-disable @typescript-eslint/no-unused-vars */
import React, { createContext, useState } from 'react'
import { ModalForm } from '@ant-design/pro-form';
import { useContext } from 'react'
import { ModalContext } from '../index';

import Exercises from '../components/Exercises';
import ChessPlaying from '../components/ChessPlaying';
import ChessRecruit from '../components/ChessRecruit';
import { getEditWarn } from '@/services/warning';
import { message } from 'antd';
import WkPlaying from '../components/WkPlaying';
export const InputValue = createContext({
  changeValue: (id?: string, key?: string, value?: number) => { },
});
export default function SettingModal() {
  const ctx = useContext(ModalContext);

  const [updateMap, setUpdateMap] = useState(new Map());
  const changeValue = (id?: string, key?: string, value?: number) => {
    const obj = updateMap.get(id) ?? { id: id };
    obj[`${key}`] = value;
    updateMap.set(id, obj);
    // console.log(Array.from(updateMap.values()));
    setUpdateMap(updateMap);
  }
  const setCtx = {
    changeValue: changeValue,
  }

  const submitForm = async (e: any) => {
    if (Array.from(updateMap.values()).length !== 0) {
      const res = await getEditWarn({ warningRuleList: Array.from(updateMap.values()) })
      if (res.success) {
        message.success('保存成功')
        ctx.hideModal(false)
        setUpdateMap(new Map())
      }
    } else {
      ctx.hideModal(false)
    }
    ctx.setWarningSet([]);
  }
  const area1 = ctx?.warnInfo?.filter((item: any) => item?.type == 1)
  const area2 = ctx?.warnInfo?.filter((item: any) => item?.type == 2)
  const area3 = ctx?.warnInfo?.filter((item: any) => item?.type == 3)
  const area4 = ctx?.warnInfo?.filter((item: any) => item?.type == 4)
  console.log(ctx?.unlock?.passGameFlag);

  return (
    <ModalForm
      title="预警设置"
      width="70%"
      visible={ctx.visible}
      onFinish={submitForm}
      modalProps={{
        destroyOnClose: true,
        onCancel: () => {
          ctx.setWarningSet([])
        }
      }}
      onVisibleChange={(v: boolean) => {
        ctx.hideModal(v)
      }}
    >
      <InputValue.Provider value={setCtx}>
        <Exercises area={area1} />
        {
          ctx?.unlock?.enableGame == 1 ?
            <ChessPlaying area={area2} /> : null
        }
        {
          ctx?.unlock?.passGameFlag == 1 ?
            <ChessRecruit area={area3} /> : null
        }
        {
          ctx?.unlock?.aiGoFlag == 1 ?
            <WkPlaying area={area4} /> : null
        }
      </InputValue.Provider>
    </ModalForm >
  )
}
